<template>
  <div class="container">
    <el-dialog
      title="商品搜索"
      :visible.sync="commoditydialog.centerDialogVisible"
      width="800px"
      center
      @open="getData"
      :lock-scroll="true"
    >
      <div class="top">
        <el-input style="width:200px;margin:0 10px" v-model="search.value" placeholder="请输入内容"></el-input>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          class="handleSearch"
          @click="handleSearch()"
        >查询</el-button>
      </div>
      <el-table
        :data="formData"
        max-height="450px"
        border
        style="width: 100%;margin-top:10px"
        ref="multipleTable"
        row-key="ProductId"
        @selection-change="handleSelectionChange"
        empty-text="暂无数据"
      >
        <el-table-column type="selection" :reserve-selection="true" align="center"></el-table-column>
        <el-table-column prop="Code" label="商品编码" align="center"></el-table-column>
        <el-table-column prop="Name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="Unit" label="单位" align="center"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination @page="handleSizeChange" @pagesize="handleCurrentChange" :pageData="pageData"></pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/pagination";
import { selectErpGoodsData } from "@/api/commodity/commodityList"; //商品

export default {
  components: {
    pagination: Pagination
  },
  props: {
    commoditydialog: Object
  },
  data() {
    return {
      formData: null,
      search: {
        value: ""
      },
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper"
      },
      tags: [],
      selectedData: []
    };
  },
  methods: {
    handleSearch() {
      this.formData = [];
      this.getData();
    },

    getData() {
      this.formData = [];
      let data = {
        goods_code: this.search.value,
        limit: this.pageData.pageSize,
        page: this.pageData.page
      };
      selectErpGoodsData(data).then(res => {
        if (res.code == 0) {
          this.formData = res.data.paginate.data;
          this.pageData.page = res.data.paginate.current_page;
          this.pageData.pagesize = res.data.paginate.per_page;
          this.pageData.total = res.data.paginate.total;
        }
      });
    },
    clickSeelct() {
      this.search.value = "";
    },
    //确定
    confirm() {
      this.$emit("tag", this.tags);
      this.cancel();
    },
    //取消
    cancel() {
      this.search.value = "";
      this.formData = [];
      this.$refs.multipleTable.clearSelection();
      this.commoditydialog.centerDialogVisible = false;
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;

      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      console.log(this.selectedData, 33333);
      this.getData();
    },
    //选取
    handleSelectionChange(data) {
      this.tags = [];
      this.selectedData = data;
      console.log(this.selectedData, 222222);
      data.forEach(res => {
        this.tags.push({
          name: res.Name,
          code: res.Code,
          id: res.ProductId
        });
      });
    }
  },
  computed: {
    checkedWeight() {
      let totalWeight = 0;
      this.selectedData.forEach(item => {
        totalWeight += item.ProductId;
      });
      console.log(this.selectedData, 11111111);
      return totalWeight.toFixed(2);
    }
  }
};
</script>
<style scoped>
.top {
  display: flex;
  /* justify-content: center; */
}
.pagination {
  text-align: right;
  padding: 10px;
}
</style>